import { Toast, Modal } from 'antd-mobile';
import React from "react";
import * as styles from '../index.scss';

import { CheckCircleFill } from 'antd-mobile-icons';

const renderContent = (msg1, msg2) => {
    return <div className={styles.divSuccessTip}>
        <span>{msg1}</span>
        {msg2 && <label>{msg2}</label>}
    </div>;
};

const renderHeader = () => {
    return <CheckCircleFill fontSize={64} color='var(--adm-color-success)' />;
};

let _Loading = false;
let _IsShowLoading = false;
let timeoutId = 0;

export function setLoading(loading, isNow, content) {
    content = content || '加载中…';
    if (typeof loading === 'string') { content = loading; loading = true; }
    _Loading = loading;
    if (_Loading) {
        if (isNow) {
            Toast.show({
                icon: 'loading',
                content,
                duration: 0
            });
            _IsShowLoading = true;
        }
        else {
            timeoutId = setTimeout(() => {
                if (_Loading && !_IsShowLoading) {
                    Toast.show({
                        icon: 'loading',
                        content,
                        duration: 0
                    });
                    _IsShowLoading = true;
                }
            }, 2000);
        }
    }
    else if (_Loading === false && _IsShowLoading) {
        Toast.clear();
        _IsShowLoading = false;
    }
}

export function clear() {
    if (timeoutId > 0) clearTimeout(timeoutId);
    Toast.clear();
    _IsShowLoading = false;
}

const loadingId = 'divLoadingId12454563';

export function showLoading(content) {
    _IsShowLoading = true;
    let ele = document.getElementById(loadingId);
    if (!ele) {
        ele = document.createElement('div');
        ele.className = 'am-toast am-toast-mask';
        ele.id = loadingId;
        ele.innerHTML += getH5LoadingHtml(content);
        document.body.appendChild(ele);
    }
}

export function hideLoading() {
    const ele = document.getElementById(loadingId);
    document.body.removeChild(ele);
    _IsShowLoading = false;
}

function getH5LoadingHtml(content) {
    content = content || '加载中……';
    const html = [];
    html.push('<span><div class="am-toast-notice am-toast-notice-closable"><div class="am-toast-notice-content">');
    html.push('<div class="am-toast-text am-toast-text-icon" role="alert" aria-live="assertive"><svg class="am-icon am-icon-loading am-icon-lg"><use xlink:href="#loading"><svg id="loading" viewBox="0 -2 59.75 60.25"><path fill="#ccc" d="M29.69-.527C14.044-.527 1.36 12.158 1.36 27.806S14.043 56.14 29.69 56.14c15.65 0 28.334-12.686 28.334-28.334S45.34-.527 29.69-.527zm.185 53.75c-14.037 0-25.417-11.38-25.417-25.417S15.838 2.39 29.875 2.39s25.417 11.38 25.417 25.417-11.38 25.416-25.417 25.416z"></path><path fill="none" stroke="#108ee9" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M56.587 29.766c.37-7.438-1.658-14.7-6.393-19.552"></path></svg></use></svg>');
    html.push(`<div class="am-toast-text-info">${content}</div></div></div><a tabindex="0" class="am-toast-notice-close">`);
    html.push('<span class="am-toast-notice-close-x"></span></a></div></span>');

    return html.join('');
}

export function showMessage(msg, afterClose, duration) {
    Toast.clear();
    Toast.show({
        icon: 'fail',
        content: msg,
        duration: duration || 2000,
        afterClose
    });
}

export function alert(msg, duration) {
    Toast.clear();
    Toast.show({
        icon: 'fail',
        content: msg,
        duration: duration || 2000
    });
}

export function alertTip(msg, title) {
    if (window.isModalInfo) return;
    window.isModalInfo = true;
    Modal.alert(title || "提示", msg, [{ text: '确认', onPress: () => { window.isModalInfo = false; } }]);
}

export function alertSuccess(msg, afterClose, duration) {
    Toast.clear();
    Toast.show({
        icon: 'success',
        content: msg,
        duration: duration === undefined ? 2000 : duration,
        afterClose,
        maskClickable: false
    });
}

export function confirm(content, onConfirm) {
    Modal.confirm({
        content,
        onConfirm
    });
}

export function alertModalSuccess(msg1, msg2, onConfirm) {
    Modal.alert({
        header: renderHeader(),
        content: renderContent(msg1, msg2),
        onConfirm
    });
}